<template>
  <div class="ShowList-container">
    <div v-for="item in list" :key="item.Id" class="sm-container">
            <span class="line"></span>
            <div class="time-container">
                <span>-{{timeFilter(item.Time)}}</span>
            </div>
            <div class="img-container">
                <router-link :to="`/movie/${item.Id}/${item.Name}`"><img :src="item.Url"/></router-link>
            </div>
            <div class="text-container">
                <h3>{{item.Name}}</h3>
                <p>{{item.Brief}}</p>
            </div>

    </div>
  </div>
</template>

<script>
import {timeFilter} from "@/utils/filter.js"
import { getMovieNoteList } from '../../Api';
export default {
    props: ["year"],
    data() {
        return {
            list: [],
        }
    },
    created() {
        this.getList();
    },
    watch: {
        year() {
            this.getList();    
        }
    },
    methods: {
        async getList() {
            let data = {}
            data.year = this.year;
            let res = await getMovieNoteList(data);
            this.list = res.data.list;
        },
        timeFilter
    },
}
</script>

<style scoped lang="less">
    .ShowList-container {
        margin-top: 50px;
        .sm-container {
            margin: 0 auto;
            display: flex;
            align-items: center;
            width: 900px;
            height: 200px;
            .line {
                background: rgba(0,0,0,.2);
                display: inline-block;
                width: 2px;
                height: 200px;
            }
            .time-container {
                color: rgba(0,0,0,.6);
            }
            .img-container {
                margin-left: 15px;
                height: 180px;
                img {
                    height: 100%;
                }
            }
            .text-container {
                p {
                    width: 650px;
                    max-height: 150px;
                    text-indent: 2em;
                }
            }
        }
    }


</style>